<template>
  <div>
    <div class="header clearfix">
      <div  @click=show>
        <span>综合排序</span>
        <img src="../assets/img/arrow.png" alt="">
      </div>
      <div @click=show>
        <span>全部筛选</span>
        <img src="../assets/img/arrow.png" alt="">
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="top" class="navbar">
      <div>
        <span>综合排序</span> 
        <span>全部筛选</span> 
      </div> 
       <ul>
          <li>销量优先</li>
          <li>距离优先</li>
          <li>评分优先</li>
          <li>速度优先</li>
          <li>起送价最低</li>
          <li>配送费最低</li>
        </ul> 
    </mt-popup>
    
    
    
  </div>
</template>

<style scoped>
  .clearfix:after {
	content: "";
	display: block;
	clear: both;
  }
  .header>div:nth-child(1){
    font-size: 12px;
    float: left;
    margin-left: 25px;
    margin-top: 5px;
  }
  .header>div:nth-child(2){
    font-size: 12px;
    float: right;
    margin-right: 25px;
    margin-top: 5px;
  }
  .navbar{
    width: 100%;
    margin-top: 40px;
  }
  .navbar span{
    margin: 5px 20px;
  }
  .navbar li{
    margin:20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    background-color: aliceblue;

  }
  
</style>




<script>

export default {
  data() {
    return {
      popupVisible:false
    };
  },
 
  methods: {
   show() {
     this.popupVisible=true  
    },
    
  },
};
</script>